<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    .el-form-item__label {
        color: #333;
    }

    .text-16-primary::after {
        position: absolute;
        content: "￥";
        color: #333;
        left: 3px;
        font-size: 16px;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
    }
</style>

<body>
    <div id="app" class="" v-cloak>
        <el-dialog title="权限修改" :visible.sync="dialogFormVisible" width="25%" @closed="CL()">
            <el-form :model="form" label-width="4em" size="small" :rules="rules" ref="ruleForm">
                <el-row :gutter="20">
                    <el-form-item label="分类" prop="typeId">
                        <el-select v-model="form.typeId" placeholder="请选择分类" size="small" style="width: 100%;">
                            <el-option :label="item.name" :value="item.id" v-for="(item, index) in options"
                                :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name" autocomplete="off" placeholder="如：豆沙包" min="0">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="价格" prop="price">
                        <el-input v-model="form.price" autocomplete="off" placeholder="如：100"
                            prefix-icon="text-16-primary" type="number" @change="formatNum(form.price, 'price')">
                        </el-input>
                    </el-form-item>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="small" class="tx-14">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')" size="small" class="tx-14">提交</el-button>
            </div>
        </el-dialog>
    </div>
    <script type="text/babel">
        new Vue({
            el: '#app',
            data: {
                dialogFormVisible: false,
                form: {
                    id: Pms.getParameter("id"),
                    htlId: Pms.getDate("userinfo", {}).htlId,
                    typeId: "",
                    name: "",
                    price: "",
                    status: 1
                },
                rules: {
                    typeId: [
                        { required: true, message: '请选择分类', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请填写名称', trigger: 'blur' },
                    ],
                    price: [
                        { required: true, message: '请填写价格', trigger: 'blur' },
                    ],
                },
                options: []
            },
            mounted() {
                this.dialogFormVisible = true
            },
            created() {
                this.getOption();
            },
            methods: {
                getOption() {
                    // 获取消费项分类数据
                    this.GET({ url: top.Config.curUrl + "/fae/faeConsumptionType/list" }).then((res) => {
                        if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                            this.options = res.result.faeConsumptionTypeList;
                            // 获取表格数据
                            this.getBean();
                        } else { //如果返回码是200则登录成功
                            this.msgError(res.retmsg)
                        }
                    })
                },
                getBean() {
                    if (this.form.id) {
                        this.GET({ url: top.Config.curUrl + "/fae/faeConsumptionConfig/get", map: this.form }).then((res) => {
                            if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                                this.form = res.result.bean;
                                console.log(this.form);
                            } else { //如果返回码是200则登录成功
                                this.msgError(res.retmsg)
                            }
                        })
                    }
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.startLoading("加载中", { background: "rgba(0, 0, 0, 0)", target: document.getElementsByClassName("el-dialog")[0] }, this)
                            this.POST({ url: top.Config.curUrl + "/fae/faeConsumptionConfig/save", map: this.form }).then((res) => {
                                if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                                    setTimeout(() => {
                                        this.Refresh("vm.getList()");
                                        this.closeLoading();
                                        this.dialogFormVisible = false;
                                    }, 1000);
                                } else { //如果返回码是200则登录成功
                                    this.msgError(res.retmsg)
                                    this.closeLoading();
                                }
                            })
                        }
                    });
                }
            }
        })
    </script>

</body>

</html>